<template>
	<div>
		<a-row :gutter="[8, 8]" :wrap="false" align="stretch">
			<!--provider容器-->
			<a-col flex="0 0 260px">
				<process-field ref="processFieldRef" />
			</a-col>
			<!--设计器容器-->
			<a-col flex="1 1 510px">
				<a-spin :spinning="props.loading">
					<a-card class="card-design" :bordered="false">
						<tool-bar
							:button="button"
							@back="back"
							@preview="preview"
							@json="viewJSON"
							@save="save"
							@print="print"
							@export="printExport"
							@clear="clear"
						/>
						<div id="hiprint-printTemplate" class="hiprint-printTemplate" />
					</a-card>
				</a-spin>
			</a-col>
			<!--元素参数容器-->
			<a-col flex="0 0 290px">
				<a-card :bordered="false" style="height: 100%">
					<a-row class="hinnn-layout-sider" :class="{ 'snowy-radius': roundedCornerStyleOpen }">
						<div id="PrintElementOptionSetting" class="print-option-setting"></div>
					</a-row>
				</a-card>
			</a-col>
		</a-row>
		<!--预览-->
		<print-preview ref="printPreviewRef" @print="print" @export="printExport" />
		<!--查看JSON-->
		<json-view ref="jsonPreviewRef" />
	</div>
</template>

<script setup name="xnPrintDesign">
	import { userPrintData } from './data/userInfoData'
	import { sysPrintData } from './data/sysInfoData'
	import { hiprint, defaultElementTypeProvider } from 'vue-plugin-hiprint'
	import { message } from 'ant-design-vue'
	import PrintPreview from './components/printPreview.vue'
	import JsonView from './components/jsonView.vue'
	import ProcessField from './components/processField.vue'
	import ToolBar from './components/toolBar.vue'
	import { globalStore } from '@/store'
	const store = globalStore()
	const emit = defineEmits({ back: null, save: null })
	const printPreviewRef = ref()
	const jsonPreviewRef = ref()
	const hiPrintTemplate = ref(null)
	const processFieldRef = ref()
	const { SNOWY_SYS_LOGO } = store.sysBaseConfig
	const props = defineProps({
		button: {
			type: Array,
			default: () => []
		},
		loading: {
			type: Boolean,
			default: () => false
		}
	})
	// 圆角风格
	const roundedCornerStyleOpen = computed(() => {
		return store.roundedCornerStyleOpen
	})
	// 初始化打印json
	const printInfoData = computed(() => {
		return Object.assign({}, userPrintData, sysPrintData)
	})
	// 修改右侧配置的默认值
	const changeDefaultParams = () => {
		// 默认参数
		window.HIPRINT_CONFIG.text.default.height = 20
		window.HIPRINT_CONFIG.image.default.src = SNOWY_SYS_LOGO
		window.HIPRINT_CONFIG.image.default.width = 20
	}
	// 初始化
	const init = (template = {}) => {
		hiprint.init({
			providers: [new defaultElementTypeProvider()]
		})
		changeDefaultParams()
		hiPrintTemplate.value = new hiprint.PrintTemplate({
			template: template,
			settingContainer: '#PrintElementOptionSetting',
			paginationContainer: '.hiprint-printPagination'
		})
		hiPrintTemplate.value.design('#hiprint-printTemplate')
	}
	// 返回
	const back = () => {
		processFieldRef.value.activeKey = '1'
		emit('back')
	}
	// 预览
	const preview = () => {
		let html = hiPrintTemplate.value.getHtml(printInfoData.value)
		printPreviewRef.value.onOpen(html)
	}
	// 保存
	const save = () => {
		// 保存之前将其转换为string格式，本身是对象，转一遍是json，再转一遍才是string
		const printJson = JSON.stringify(hiPrintTemplate.value?.getJson()) || ''
		emit('save', printJson)
	}
	// 打印
	const print = () => {
		// 参数: 打印时设置 左偏移量，上偏移量
		let options = { leftOffset: -1, topOffset: -1 }
		// 扩展
		let ext = {
			callback: () => {
				console.log('浏览器打印窗口已打开')
			},
			styleHandler: () => {
				// 重写 文本 打印样式
				return '<style></style>'
			}
		}
		// 调用浏览器打印
		hiPrintTemplate.value.print(printInfoData.value, options, ext)
	}
	// 导出PDF
	const printExport = () => {
		hiPrintTemplate.value.toPdf(printInfoData.value, '打印预览')
	}
	// 清空
	const clear = () => {
		try {
			hiPrintTemplate.value.clear()
		} catch (error) {
			message.error('操作失败：' + error)
		}
	}
	// 预览json
	const viewJSON = () => {
		jsonPreviewRef.value.onOpen(JSON.stringify(hiPrintTemplate.value.getJson()))
	}
	defineExpose({
		init,
		save,
		print,
		printExport,
		clear
	})
</script>

<style lang="less" scoped>
	// 拖拽格子
	.drag_item_box {
		padding: 3px;
	}
	// 设计容器
	.card-design {
		overflow: hidden;
		overflow-x: auto;
		overflow-y: auto;
	}
	.drag_item_title {
		font-size: 16px;
		padding: 12px 0 0 0;
		font-weight: bold;
	}
	.xn-print-draggable-item {
		border: 1px solid #d9d9d9;
		display: flex;
		padding: 8px;
	}
	.xn-print-topbar {
		margin-bottom: 2px;
		padding: 10px;
		background: var(--card-actions-background);
	}

	// 右侧容器样式
	:deep(.print-option-setting) {
		font-size: 12px;
		.prop-tabs .prop-tab-items {
			padding: 0;
			border-bottom: 1px solid rgba(253, 253, 253, 0.12);

			.prop-tab-item {
				&.active {
					border-bottom-color: var(--primary-color);
					.tab-title {
						color: var(--primary-color);
					}
				}
				.tab-title {
					font-weight: normal;
					color: var(--font-color);
				}
			}
		}
		.hiprint-option-items {
			border-radius: 2px;
			justify-content: space-between;

			input[type='range'] {
				appearance: auto;
			}
			input[type='checkbox'] {
				position: relative;
				width: 18px;
				height: 18px;
				border: 1px solid #d9d9d9;

				&:checked {
					background-color: transparent;
				}

				&:checked::after {
					content: '';
					position: absolute;
					left: 4px;
					top: 4px;
					width: 9px;
					height: 5px;
					border: 2px solid #953d96;
					border-top: none;
					border-right: none;
					transform: rotate(-45deg);
				}
			}
			.minicolors-theme-bootstrap .minicolors-input {
				width: 100% !important;
			}

			&[data-title='样式'] .hiprint-option-item-row:first-child {
				display: flex;
				justify-content: space-between;
			}
		}
		.hiprint-option-item-settingBtn {
			border-radius: 2px;
			margin: 5px 0;

			&.hiprint-option-item-submitBtn {
				background-color: var(--primary-color);
			}

			& + .hiprint-option-item-settingBtn {
				margin-left: 10px;
			}
		}
		.hiprint-option-item:not(.hiprint-option-item-row) {
			padding: 0;
			width: calc(50% - 5px);
		}
		.hiprint-option-item-row {
			padding: 0 !important;
			&:has(.hiprint-option-item-field div) {
				.hiprint-option-item-field {
					margin-top: 8px !important;

					div {
						flex: 0 0 80px !important;
						& + *:not(input[type='checkbox']) {
							flex: 1 !important;
						}
					}
				}
				& > .hiprint-option-item-label {
					font-weight: bold;
					margin-top: 20px;
					padding-left: 10px;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 10%;
						width: 4px;
						height: 80%;
						background: #00c1de;
						border-radius: 2px;
					}
				}
			}
		}
	}

	:deep(.print-option-setting) {
		.hiprint-option-item {
			.hiprint-option-table-selected-item {
				border-color: #d9d9d9;
				border-radius: 2px;
				height: 26px;
				line-height: 1;
				display: flex;
				align-items: center;
				.hi-pretty {
					height: 14px;
					input[type='checkbox'] {
						width: 14px;
						height: 14px;
						position: absolute;
						top: 0;

						&:checked::after {
							display: none;
						}
					}
				}
			}
			.hiprint-option-item-field {
				input,
				select,
				textarea {
					border-color: #d9d9d9;
					border-radius: 2px;
				}
			}
		}
	}

	// 暗黑模式
	:deep(.css-dev-only-do-not-override-1xkl0xm) {
		.prop-tabs {
			background-color: var(--snowy-background-color);

			.prop-tab-items {
				.prop-tab-item {
					background-color: var(--snowy-background-color);
				}
			}
			.hiprint-option-items {
				background-color: var(--snowy-background-color);
			}
		}
	}

	// 圆角风格
	.snowy-radius {
		:deep(.print-option-setting) {
			.hiprint-option-item-settingBtn {
				border-radius: 6px;
			}
			.hiprint-option-item {
				.hiprint-option-table-selected-item {
					border-radius: 6px;
				}
				.hiprint-option-item-field {
					input,
					select,
					textarea {
						border-radius: 6px;
					}
				}
			}
		}
	}
</style>
